<template>
	<div>
		<view class="wrap-banner" :style="{ height: bannerHeight }">
			<swiper autoplay interval="3000" circular @change="changeBanner">
				<block v-for="(item, index) in bannerList" :key="index">
					<swiper-item>
						<image class="banner-item" :src="item.image || item" />
					</swiper-item>
				</block>
			</swiper>

			<view
				class="page-control flex align-center"
				:class="position === 'center' ? 'just-center' : position === 'right' ? 'just-end' : 'just-start'"
				v-if="bannerList.length > 1"
			>
				<block v-if="pageType === 0">
					<block v-for="(item, index) in bannerList" :key="index">
						<view class="page-item" :class="{ pageActive: index === current }"> </view>
					</block>
				</block>

				<block v-else-if="pageType === 1">
					<view class="control-bg flex align-center just-center f-26">
						{{ current + 1 }}/{{ bannerList.length }}
					</view>
				</block>
			</view>
		</view>
	</div>
</template>

<script>
	export default {
		props: {
			/**
			 * 高度
			 */
			bannerHeight: {
				type: String,
				default: "400rpx",
			},
			/**
			 * 轮播图数组
			 */
			bannerList: {
				type: Array,
				default: [],
			},
			/**
			 * 分页控制器的类型
			 * 0: 圆点分页器 1: 数字分页器
			 */
			pageType: {
				type: Number,
				default: 0,
			},
			/**
			 * 位置
			 */
			position: {
				type: String,
				default: "center",
			},
		},
		data() {
			return {
				current: 0,
			};
		},
		methods: {
			/**
			 * 轮播图切换
			 */
			changeBanner(e) {
				this.current = e.detail.current;
			},
		},
	};
</script>

<style lang="scss" scoped>
	.wrap-banner {
		width: 100%;
		overflow: hidden;
		position: relative;
		z-index: 1;

		.banner-item {
			width: 100%;
			height: 100%;
		}

		.page-control {
			position: absolute;
			bottom: 12rpx;
			left: 0;
			z-index: 2;
			width: 100%;
			padding: 0rpx 20rpx;
			box-sizing: border-box;
			overflow: hidden;

			.page-item {
				width: 12rpx;
				height: 12rpx;
				border-radius: 20rpx;
				overflow: hidden;
				margin-right: 12rpx;
				background: #ffffff;

				&:last-child {
					margin-right: 0rpx;
				}
			}

			.pageActive {
				width: 32rpx;
				background: $theme-color;
			}

			.control-bg {
				height: 40rpx;
				background: rgba(0, 0, 0, 0.5);
				width: 120rpx;
				border-radius: 20rpx;
				color: white;
			}
		}
	}
</style>
